<!--
 * @Description: 
 * @Version: 
 * @Author: 学渣小明
 * @Date: 2022-05-03 11:19:47
 * @LastEditors: 学渣小明
 * @LastEditTime: 2022-05-03 14:43:29
-->
<div class="hot-search">
    <div class="title">
        <span>热搜榜</span>
        <ul class="tab-list">
            <li class="active">日</li>
            <li>周</li>
            <li>月</li>
        </ul>
    </div>
    <ul class="hot-search-list">
        <li>
            <icon class="icon-rank hexagon rank-1">1</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank hexagon rank-2">2</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank hexagon rank-3">3</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">4</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
        <li>
            <icon class="icon-rank">5</icon>
            <span>漳州市政府采购中心关于汽关于汽车的网关标题显示10条最多显示30个字</span>
        </li>
    </ul>
</div>
<script>
    var $aTabLi = $('.hot-search ul.tab-list>li');
    $aTabLi.click(function () {
        $aTabLi.removeClass('active')
        $(this).addClass('active');
    });
</script>